<template>
  <div>
    <div
      class="mapChart"
      ref="mapChart"
      style="width: 100%; height: 100%"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import chinaJson from "./china.json";
const mapChart = ref();
echarts.registerMap("china", chinaJson as any);

onMounted(() => {
  const mychart = echarts.init(mapChart.value);
  mychart.setOption({
    geo: {
      map: "china",
      zoom: 1.2,
      top: 120,
      label: {
        show: true,
        color: "white",
        emphasis: {
          color: "white",
        },
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#00377c", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#051d41", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        borderColor: "#1cacca",
        borderWidth: 2,
        shadowColor: "#255c9a",
        emphasis: {
          areaColor: "#1cacca",
          fontColor: "white",
        },
      },
    },
    series: [
      {
        name: "Locations",
        type: "effectScatter",
        coordinateSystem: "geo",
        data: [
          { name: "Beijing", value: [116.4074, 39.9042] },
          { name: "Shanghai", value: [121.4737, 31.2304] },
          { name: "Hubei", value: [114.298572, 30.584355] },
          { name: "Sicuan", value: [104.065735, 30.659462] },
        ],
        avoidLabelOverlap: true,
        symbolSize: 14,
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        hoverAnimation: true,
        label: {
          formatter: "{b}",
          position: "right",
          show: true,
        },
        itemStyle: {
          normal: {
            color: "#30b36c",
          },
        },
      },
      {
        name: "Lines",
        type: "lines",
        coordinateSystem: "geo",
        data: [
          {
            coords: [
              [116.4074, 39.9042], // Beijing
              [121.4737, 31.2304], // Shanghai
            ],
            lineStyle: {
              normal: {
                color: "#46bee9",
                width: 1,
                opacity: 0.6,
                curveness: 0.2,
              },
            },
          },
        ],
        effect: {
          show: true,
          period: 6,
          trailLength: 0.1,
          color: "white",
          symbolSize: 15,
          symbol:
            "path://M681.7 1017.4c-7.1 0-14.2-1.1-21.3-3.2l-148.9-45.5-147.9 45.4c-22.1 6.8-45.4 2.8-63.9-10.9-18.6-13.7-29.2-34.8-29.2-57.9V863c0-11.9 5.9-23 15.7-29.7l93.4-64 6.3-109.1L150 700.9c-21 3.7-42.4-2-58.7-15.7-16.4-13.7-25.8-33.8-25.8-55.2v-68.5c0-25.2 13.4-48.9 35.1-61.8l279.9-167.1V171c0-46.3 29.6-89.1 47.3-110.5 11.9-14.4 24.8-27.1 37.4-36.8C482.4 10.4 497.5 4 511.5 4c33.6 0 69.9 38.8 84 55.4 17.9 21.3 48 64.1 48 111.6v161.5l281.7 167.1c21.8 12.9 35.3 36.6 35.3 61.9V630c0 21.4-9.4 41.5-25.8 55.2-16.3 13.7-37.7 19.4-58.7 15.7l-237.9-40.8 6.3 109.1 93.4 64c9.8 6.7 15.7 17.8 15.7 29.7v82.3c0 23.1-10.6 44.2-29.2 57.9-12.6 9.5-27.4 14.3-42.6 14.3z m-0.2-71.9z m-170-50.5c3.5 0 7.1 0.5 10.5 1.6l159.5 48.8V882l-92.3-63.3c-9.2-6.3-14.9-16.5-15.6-27.6l-10-172c-0.6-11 3.8-21.6 11.9-28.9 8.2-7.3 19.3-10.5 30.1-8.6L888.3 630h0.2v-68.5L589.1 384c-10.9-6.5-17.6-18.3-17.6-31V171c0-16.2-9.6-37.9-26.4-59.4C532 94.8 519.3 84 511.8 78.8c-7.5 5.4-20 16.3-33.1 33.5-16.3 21.4-26.1 43.4-26.1 58.8v182c0 12.7-6.7 24.4-17.6 30.9L137.5 561.4V630h0.2l280.7-48.4c10.8-1.9 21.9 1.3 30.1 8.6 8.2 7.3 12.6 18 12 28.9l-10 172c-0.6 11.1-6.4 21.3-15.6 27.6L342.5 882v63.3l158.4-48.7c3.5-1.1 7-1.6 10.6-1.6z",
        },
        zlevel: 1,
      },
      {
        name: "Lines",
        type: "lines",
        coordinateSystem: "geo",
        data: [
          {
            coords: [
              [114.298572, 30.584355], // Beijing
              [104.065735, 30.659462], // Shanghai
            ],
            lineStyle: {
              normal: {
                color: "#46bee9",
                width: 1,
                opacity: 0.6,
                curveness: 0.2,
              },
            },
          },
        ],
        effect: {
          show: true,
          period: 6,
          trailLength: 0.1,
          color: "white",
          symbolSize: 15,
          symbol:
            "path://M681.7 1017.4c-7.1 0-14.2-1.1-21.3-3.2l-148.9-45.5-147.9 45.4c-22.1 6.8-45.4 2.8-63.9-10.9-18.6-13.7-29.2-34.8-29.2-57.9V863c0-11.9 5.9-23 15.7-29.7l93.4-64 6.3-109.1L150 700.9c-21 3.7-42.4-2-58.7-15.7-16.4-13.7-25.8-33.8-25.8-55.2v-68.5c0-25.2 13.4-48.9 35.1-61.8l279.9-167.1V171c0-46.3 29.6-89.1 47.3-110.5 11.9-14.4 24.8-27.1 37.4-36.8C482.4 10.4 497.5 4 511.5 4c33.6 0 69.9 38.8 84 55.4 17.9 21.3 48 64.1 48 111.6v161.5l281.7 167.1c21.8 12.9 35.3 36.6 35.3 61.9V630c0 21.4-9.4 41.5-25.8 55.2-16.3 13.7-37.7 19.4-58.7 15.7l-237.9-40.8 6.3 109.1 93.4 64c9.8 6.7 15.7 17.8 15.7 29.7v82.3c0 23.1-10.6 44.2-29.2 57.9-12.6 9.5-27.4 14.3-42.6 14.3z m-0.2-71.9z m-170-50.5c3.5 0 7.1 0.5 10.5 1.6l159.5 48.8V882l-92.3-63.3c-9.2-6.3-14.9-16.5-15.6-27.6l-10-172c-0.6-11 3.8-21.6 11.9-28.9 8.2-7.3 19.3-10.5 30.1-8.6L888.3 630h0.2v-68.5L589.1 384c-10.9-6.5-17.6-18.3-17.6-31V171c0-16.2-9.6-37.9-26.4-59.4C532 94.8 519.3 84 511.8 78.8c-7.5 5.4-20 16.3-33.1 33.5-16.3 21.4-26.1 43.4-26.1 58.8v182c0 12.7-6.7 24.4-17.6 30.9L137.5 561.4V630h0.2l280.7-48.4c10.8-1.9 21.9 1.3 30.1 8.6 8.2 7.3 12.6 18 12 28.9l-10 172c-0.6 11.1-6.4 21.3-15.6 27.6L342.5 882v63.3l158.4-48.7c3.5-1.1 7-1.6 10.6-1.6z",
        },
        zlevel: 1,
      },
    ],
  });
});
</script>

<style lang="scss" scoped></style>
